import { Empty, Row, Col, Select, Tooltip } from 'antd';
import { Advice, Advisor } from '@antv/ava';
import { Chart } from '@berryv/g2-react';
import { DownOutlined } from '@ant-design/icons';
import i18n from '@/app/i18n';
import { customizeAdvisor, getVisAdvices } from './advisor/pipeline';
import { useEffect, useMemo, useState, useRef } from 'react';
import { defaultAdvicesFilter } from './advisor/utils';
import { AutoChartProps, ChartType, CustomAdvisorConfig, CustomChart, Specification } from './types';
import { customCharts } from './charts';
import { useTranslation } from 'react-i18next';
import { theme } from '../theme.js';
import DynamicChartComponent from '../DynamicChartComponent';
// import Plotly from 'plotly.js-dist-min';
import Plot from 'react-plotly.js'

const { Option } = Select;


export const AutoChart = (props: any) => {
  const { data } = props;
  const { t } = useTranslation();
  const [advisor, setAdvisor] = useState<Advisor>();
  const [advices, setAdvices] = useState<Advice[]>([]);
  const [renderChartType, setRenderChartType] = useState<ChartType>();
  const [chartSize, setChartSize] = useState({ width: 0, height: 0 });
  const plotRef = useRef(null);
  useEffect(() => {
   console.log(data,'data1')
  //  setTimeout(()=>{
  //   Plotly.newPlot(plotRef?.current,{...data.data})
  // },2000)
  }, [data]);
  useEffect(()=>{
    const width = window.innerWidth/100;
    const height = window.innerHeight/100;
    setChartSize({
      width:width*105000/1920,
      height:height*52000/1080
    })
    window.addEventListener('resize',()=>{
      const width = window.innerWidth/100;
      const height = window.innerHeight/100;
      setChartSize({
        width:width*105000/1920,
        height:height*52000/1080
      })
    })
  },[])
  const visComponent = useMemo(() => {
    console.log(data,'data2')
    console.log(plotRef,'33333333333');
    const modelData =  {
      option: {}
        
    };
    modelData.option = data.data;
    return <DynamicChartComponent modelData={data} />
  }, [data]);

  if (data) {
    return (
      <div>
        {/* <div id="myDiv" ref={plotRef}></div> */}
        <div className="auto-chart-content" id="container">{visComponent}</div>
      </div>
    );
  }

  return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'暂无合适的可视化视图'} />;
};

export * from './helpers';
